<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>首页</title>
	<link href="style/css/bootstrap.min.css" rel="stylesheet">
	<link href="style/css/style.css" rel="stylesheet">
	<script src="style/js/jquery-1.11.0.min.js"></script>
	<script src="style/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid main">
		<div class="left">
			<div class="row logo">
				<div class="media">
				  	<div class="media-left">
				    	<a href="#">
				      		<img class="media-object logo-img" src="style/css/logo2.png" alt="瑞海科技">
				    	</a>
				  	</div>
				  	<div class="media-body">
				    	<p class="logo-name">瑞海科技</p>
				  </div>
				</div>
			</div>
			<div class="row">
                <ul id="manageList">
                    <li class="default active">
                        <div>
                            <img src="style/css/home1.png" alt="home">
                            <a href="home.html" id="home">首页</a>
                        </div>
                    </li>
                    <li class="default">
                        <div class="pull-left">
                            <img src="style/css/site2.png" alt="site">
                            <a href="site.html" id="site">站点</a>
                        </div>
                        <div class="toggle pull-right" onclick="isShow1()">
                            <img id="choose1" src="style/css/downArrow.png" alt="">
                        </div>
                        <div class="clearfix"></div>                            
                    </li>
                    <div id="sites">
                    	<div class="site-item">
	                        <a href="#" class="item checked">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>    
                    </div>
                    <li class="default">
                        <div>
                            <img src="style/css/history2.png" alt="history">
                            <a href="history.html" id="history">历史数据</a>
                        </div>                               
                    </li>
                    <li class="default">
                        <div class="pull-left">
                            <img src="style/css/userManage2.png" alt="admin">
                            <a href="userManage.html" id="userManage">后台管理</a>
                        </div>
                        <div class="toggle pull-right" onclick="isShow2()">
                            <img id="choose2" src="style/css/downArrow.png" alt="">
                        </div>
                        <div class="clearfix"></div>                               
                    </li>
                    <div id="manage">
                    	<div class="manage-item">
                            <img src="style/css/green.png" alt="user">
                            <a href="userManage.html" class="large-item checked">用户管理</a>
                        </div>
                        <div class="manage-item">
                            <img src="style/css/yellow.png" alt="site">
                            <a href="siteManage.html" class="large-item">站点管理</a>
                        </div>
                        <div class="manage-item device">
                        	<div class="pull-left">
	                            <img src="style/css/pink.png" alt="device">
                            	<a href="cameraManage.html" class="large-item">设备管理</a>
	                        </div>
	                        <div onclick="isShow3()">
	                            <img id="choose3" src="style/css/add.png" alt="add">
	                        </div>
	                        <div class="clearfix"></div>
                        </div>
                        <div id="device">
                        	<div class="device-item">
		                        <a href="cameraManage.html" class="small-item">摄像头</a>
		                    </div>
		                    <div class="device-item">
		                        <a href="senseManage.html" class="small-item">传感</a>
		                    </div>
                        </div>                        
                        <div class="manage-item">
                            <img src="style/css/gray.png" alt="admin">
                            <a href="publishAnnounce.html" class="large-item">发布公告</a>
                        </div>
                    </div>
                </ul>
            </div>
            <div class="row footer text-center">
				Copyright &copy; 2018 | &nbsp; 瑞海集团  版权所有 &nbsp;
			</div>
			<script type="text/javascript">
                $(document).ready(function(){ 
                    $("#manageList li a").each(function(){  
                        $this = $(this); 
                        var id2=$this.attr("id");
                        var src2="style/css/"+id2+"2.png";
                        $this.prev().attr("src",src2);
                        if($this[0].href==String(window.location)){ 
                            $("#manageList li").removeClass("active");
                            $this.parent().parent().addClass("active");
                            var id1=$this.attr("id");
                        	var src1="style/css/"+id1+"1.png";
                        	$this.prev().attr("src",src1);
                        } 
                    }); 
                    $("#sites div a").each(function(){  
                        $this = $(this);  
                        if($this[0].href==String(window.location)){
                        	$("#manageList li").removeClass("active");
                        	$("#manageList li:eq(1)").addClass("active"); 
                            $("#sites div a").removeClass("checked");
                            $this.addClass("checked");  
                        } 
                    });
                    $("#manage div a").each(function(){  
                        $this = $(this);  
                        if($this[0].href==String(window.location)){
                        	$("#manageList li").removeClass("active");
                        	$("#manageList li:eq(3)").addClass("active");
                        	console.log($("#manageList li:eq(3)")); 
                            $("#manage div a").removeClass("checked");
                            $this.addClass("checked");  
                        } 
                    }); 
                });
                function isShow1(){
					var sites=document.getElementById('sites');
					$("#choose1").src="style/css/downArrow.png";
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(1)").addClass("active");
			        if(sites.style.display == 'none'){  
			            sites.style.display = 'block';
			            $('#choose1').attr('src', 'style/css/upArrow.png');
			        }else{
			            sites.style.display = 'none';
			            $('#choose1').attr('src', 'style/css/downArrow.png');
			        }
			    } 
			    function isShow2(){
					var manage=document.getElementById('manage');
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(3)").addClass("active");
			        console.log($("#manageList li:eq(3)")); 
			        if(manage.style.display == 'none'){  
			            manage.style.display = 'block';
			            $('#choose2').attr('src', 'style/css/upArrow.png');
			        }else{
			            manage.style.display = 'none';
			            $('#choose2').attr('src', 'style/css/downArrow.png');
			        }
			    }
			    function isShow3(){
					var device=document.getElementById('device');
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(3)").addClass("active");
			        console.log($("#manageList li:eq(3)")); 
			        if(device.style.display == 'none'){  
			            device.style.display = 'block';
			            $('#choose3').attr('src', 'style/css/reduce.png');
			        }else{
			            device.style.display = 'none';
			            $('#choose3').attr('src', 'style/css/add.png');
			        }
			    }  
            </script>
		</div>
		<div class="right">
			<div class="row header">
				<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
					<div class="row search">
						<input type="search" placeholder="Search…" class="searchInput">
						<a href="#" class="searchLink"></a>
					</div>
				</div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-right">
                    <div class="row userMsg pull-right">
                    	<a href="#" class="bell" onclick="javasrcipt:ShowDiv2('warnMsg')"><img src="style/css/bell.png" alt="bell" class="bellImg"><span class="badge">7</span></a>
                    	<a href="#" onclick="javasrcipt:ShowDiv('personalCenter','fade')">   
                    		<img src="style/css/people.png" alt="people">
                        	<span class="username">用户名</span>
                    	</a>
                        <a type="button" class="btn exit">安全退出</a>    
                    </div>                   
                </div> 
			</div>
			<div class="row welcome hidden-xs">
				<p class="msg pull-right">欢迎您使用！<span class="small">您最后一次登录时间为 02/01/2019 05:34:59 PM</span></p>
			</div>
			<div class="row">
				<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
					<div class="row warnInfo">
						<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 infoItem process">
							<div class="row text-center number">270<small class="small">条</small></div>
							<div class="row text-center">已处理预警信息</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 infoItem audit">
							<div class="row text-center number">6<small class="small">条</small></div>
							<div class="row text-center">待审核预警信息</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 infoItem sum">
							<div class="row text-center number">270<small class="small">条</small></div>
							<div class="row text-center">本月累计预警信息</div>
						</div>
					</div>
					<div class="row warningGraph">
						<div class="row warningTitle">
							<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 warningName text-center">年预警信息曲线图</div>
							<div class="col-lg-6 col-lg-offset-1 col-md-7 col-sm-12 col-xs-12 text-right">
								<img src="style/css/blue.png" alt="people">
                        		<span class="year">年份：2018年</span>
                        		<img src="style/css/red.png" alt="people">
                        		<span class="unit">单位：条</span>  
							</div>
						</div>
						<div class="row" id="warning"></div>
					</div>
					<div class="row warnTable">
						<div class="row warnTitle">
							<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 text-center warnName">预警信息</div>
							<div class="col-lg-6 col-lg-offset-1 col-md-7 col-sm-12 col-xs-12 text-right warnDate">2019年01月</div>
						</div>
						<div class="row warnBody">
							<table class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
								<thead>
									<tr class="warnTr title">
										<th class="warnTh">日期</th>
										<th class="warnTh">站点</th>
										<th class="warnTh">触发因素</th>
										<th class="warnTh">状态</th>
									</tr>
								</thead>
								<tbody>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
									<tr class="warnTr">
										<td class="warnTd1">12/28  09:30:45</td>
										<td class="warnTd2">西部云谷变电站</td>
										<td class="warnTd3">未佩戴安全帽</td>
										<td class="warnTd4">待处理</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>					
				</div>
				<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 sideBar">
					<div class="row customer">
						<div class="row customerTitle">
							<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 customerName text-center">客户类型占比</div>
							<div class="col-lg-3 col-md-5 col-sm-5 col-xs-5 text-right">年份</div>
							<div class="col-lg-3 col-md-7 col-sm-7 col-xs-7">
								<div class="row select">
									<select id="year">
										<option class="yearItem" value="1">2019</option>
										<option class="yearItem" value="2">2018</option>
										<option class="yearItem" value="3">2017</option>
									</select>
								</div>	
							</div>
						</div>
						<div class="row" id="customer"></div>
					</div>					
					<div class="noticeInfo row">
						<div class="row infoTitle">公告信息栏</div>
						<ul  class="row">
							<li class="infoItem">
								<span class="date">2018/12/28</span>
								<div class="detail">
									<a href="announceDetail.html" class="infoMain">西部云谷变电站未佩戴安全帽触发报警</a> 
								</div>
								<div class="publisher text-right">
									<span class="publisherItem">发布人：</span>
									<span class="publisherItem">西部云谷管理员</span>
								</div>
							</li>
							<li class="infoItem">
								<span class="date">2019/01/03</span>
								<div class="detail">
									<a href="announceDetail.html" class="infoMain">西部云谷变电站未佩戴安全帽触发报警</a> 
								</div>
								<div class="publisher text-right">
									<span class="publisherItem">发布人：</span>
									<span class="publisherItem">西部云谷管理员</span>
								</div>
							</li>
							<li class="infoItem">
								<span class="date">2018/12/28</span>
								<div class="detail">
									<a href="announceDetail.html" class="infoMain">西部云谷变电站未佩戴安全帽触发报警</a>  
								</div>
								<div class="publisher text-right">
									<span class="publisherItem">发布人：</span>
									<span class="publisherItem">西部云谷管理员</span>
								</div>
							</li>
							<li class="infoItem">
								<span class="date">2019/01/03</span>
								<div class="detail">
									<a href="announceDetail.html" class="infoMain">西部云谷变电站未佩戴安全帽触发报警</a>  
								</div>
								<div class="publisher text-right">
									<span class="publisherItem">发布人：</span>
									<span class="publisherItem">西部云谷管理员</span>
								</div>
							</li>
						</ul>
						<div class="row page">
							<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 text-right selected">共<span class="digital">2</span>页</div>
							<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 text-left">第<span class="digital digital2">1</span>页</div>
							<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 text-right ">
								<a href="#" class="prev">上一页</a>
							</div>
							<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 text-left">
								<a href="#" class="next">下一页</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</div>
	<div id="warnMsg" class="container-fluid warn_content">
		<div class="row">
			<a href="#">
				<span>监控</span>预警
				<span>2</span>条
				<img src="style/css/warn.png" alt="warn">
			</a>
		</div>
		<div class="row">
			<a href="">
				<span>传感</span>预警
				<span>5</span>条
				<img src="style/css/warn.png" alt="warn">
			</a>
		</div>
	</div>
	<div id="fade" class="black_overlay">
	</div>
	<div id="personalCenter" class="container-fluid white_content">
		<div class="row title">
			<span class="pull-left titleItem">个人中心</span>
			<a class="pull-right titleItem link"  onclick="CloseDiv('personalCenter','fade')">     
			  <img src="style/css/shut.png"/>  
			</a>
		</div>
		<div class="row content">
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">头像:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<a href="#" class="link"><img src="style/css/camera4.png"/></a>
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">用户名:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<input type="text" value="瑞海科技" class="input">
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">密码:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<input type="password" value="******" class="input">
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">站点:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8 siteContent">
					<div class="siteContentItem">云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,</div>
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">摄像头:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8 siteContent">
					<div class="siteContentItem">camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•</div>
				</div>
			</div>		
		</div>
		<div class="row">
			<div class="row date">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<sapn>创建日期:</span>
				</div>
				<div class="col-lg-10 col-md-9 col-sm-9">
					<div class="creatDate">2019-01-19</div>
				</div>
			</div>
			<div class="row date">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<span>修改日期:</span>
				</div>
				<div class="col-lg-10 col-md-9 col-sm-9">
					<div class="editDate">2019-01-24</div>
				</div>
			</div>
		</div>
		<div class="row btns text-center">
			<input type="submit" value="保存" class="save">
			<a href="#" class="cancel" onclick="CloseDiv('personalCenter','fade')">取消</a>
		</div>			
	</div>
<script src="style/js/public.js"></script>
<script src="style/js/highcharts.js"></script>
<script type="text/javascript">		
// 绘制客户类型折线图
// 定义颜色列表
var colors=Highcharts.setOptions({ 
    colors: ['#ED52A6', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 
'#FFF263', '#6AF9C4'] 
});
 var chart1 = Highcharts.chart('warning', {
	chart: {
		type: 'area'
	},
	title: {
		text: ''
	},
	xAxis: {
		categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
		// categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		// 设置标签
		labels: {
            style: {
            	color: '#999',
				fontSize:'15px',
				// fontFamily:'PingFangSC-Regular'
			}
        },
		gridLineColor: '#f00',
		lineColor: '#f7f7f7',
		lineWidth: 2,
		tickColor: '#f7f7f7'
	},
	yAxis: {
		title: {
	 		// y坐标标题不显示
	 		enabled: false,
	 	},
	 	tickPositions: [0,5,10,15,20,25,30,35,40],
	 	labels: {
            style: {
            	color: '#02bbf1',
				fontSize:'14.5px',
				fontFamily:'PingFangSC-Regular'
			}
        },
	 	gridLineColor: '#f7f7f7',
	 	gridLineWidth: 2,
	 	lineColor: '#f7f7f7',
	 	lineWidth: 2
	},
 	plotOptions: {
            area: {
                color:'#EF52A7',
                // 定义颜色渐变
                fillColor: {
					linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
					stops: [
						[0, Highcharts.getOptions().colors[0]],
						[
							1,
							Highcharts.color(Highcharts.getOptions().colors[0])
							.setOpacity(0.25).get()
						]
					]
				},
                lineColor:'#FC0F54',
                fillOpacity: 0.2
            }
        },
	series: [{
		name: '',
		// 自定义数据点样式
		marker: {
			symbol: 'url(style/css/redMarker.png)',
			width: 9,
			height: 9
		},
		data: [7,8,12,13,14,33,15,18,19,17,15,14],
		showInLegend: false
	}],
	credits: {  
        enabled: false     //不显示LOGO 
    } ,
	exporting:{ 
         enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 
    }
});
 // 绘制客户类型环形图
    var chart2 = Highcharts.chart('customer', {
	chart: {
		spacing : [40, 0 , 40, 0],		
		backgroundColor: 'rgba(0,0,0,0)'
	},
	title: {
		text: ''
	},
	tooltip: {
		pointFormat: '{series.name}:{point.percentage:.1f}%'
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				format: '{point.name}: {point.percentage:.1f} %',
				style:{
                    fontSize:"12px",
					fontWeight:'200',
                    color:"#fff",
					textOutline:'0'   //设置字体没有阴影
                    }
			},
			point: {
				events: {
					mouseOver: function(e) {  // 鼠标滑过时动态更新标题
						// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
						chart.setTitle({
							text: e.target.name+ '\t'+ e.target.y + ' %'
						});
					}
				}
			},
		}
	},
	colors: ['#83ED2A', '#FFBA37', '#2FE5BB', '#7A46F2','#F713A5'],
	series: [{
		type: 'pie',
		innerSize: '80%',
		name: '客户类型占比',
		data: [
			['沟道',16.2],
			['变电站',32.8],
			['电网',23.6],
			['配电室',48.6],
			['隧道',18.8],			
		]
	}],
	// 去除Highcharts.com链接
	credits: {  
        enabled: false     //不显示LOGO 
    } ,
    // 去掉图片右上角的打印及导出按钮
	exporting:{ 
         enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 
    } 
});
</script>
</body>
</html>